<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评论管理</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <script src="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js" charset="utf-8"></script>
</head>

<body>
    <div style="margin: 15px;padding:15px;background-color: #fff;">
        <!-- 搜索框 -->
        <div class="layui-form" style="border-bottom:1px solid #f6f6f6">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <select name="status">
                            <option value="" {if isset($search['status']) && $search['status']=='' }selected{/if}>全部
                            </option>
                            <option value="0" {if isset($search['status']) && $search['status']=='0' }selected{/if}>正常
                            </option>
                            <option value="1" {if isset($search['status']) && $search['status']=='1' }selected{/if}>待审核
                            </option>
                            <option value="2" {if isset($search['status']) && $search['status']=='2' }selected{/if}>垃圾评论
                            </option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">评论</label>
                    <div class="layui-input-block">
                        <input type="text" name="comment" value="{$search['comment']|default=''}" placeholder="搜索评论"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="submit" lay-submit lay-filter="search" class="layui-btn">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 头工具栏 -->
        <div class="layui-btn-group" style="margin-top: 10px;">
            <button class="layui-btn layui-btn-sm" onclick="delAll()">批量删除</button>
            <button class="layui-btn layui-btn-sm" onclick="pending()">批量待审</button>
            <button class="layui-btn layui-btn-sm" onclick="passed()">审核通过</button>
            <button class="layui-btn layui-btn-sm" onclick="spam()">垃圾评论</button>
            <button class="layui-btn layui-btn-sm" onclick="refresh()"><i
                    class="layui-icon layui-icon-refresh"></i></button>
        </div>

        <!-- 数据表格 -->
        <table class="layui-table layui-form">
            <thead>
                <tr>
                    <th width="30"><input type="checkbox" value="1" lay-filter="filter-chkAll" lay-skin="primary"></th>
                    <th>ID</th>
                    <th>评论者</th>
                    <th width="25%">评论内容</th>
                    <th>评论文章</th>
                    <th width="65">状态</th>
                    <th>评论时间</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody>
                {if $items}
                {foreach $items as $item}
                <!-- 输出一级评论 -->
                <tr>
                    <td><input type="checkbox" value="{$item['id']}" lay-filter="filter-chk" lay-skin="primary"></td>
                    <td>{$item['id']}</td>
                    <td>{$item['name']}</td>
                    <td>{$item['comment']}</td>
                    <td>{$item['article']|raw}</td>
                    <td><input type="checkbox" name="status" lay-filter="status" value="{$item['id']}" lay-skin="switch"
                            lay-text="正常|待审" {if $item['status']==0} checked{/if}></td>
                    <td>{$item['add_time']|date='Y-m-d H:i:s'}</td>
                    <td>
                        {if $item['pid']==0}<a class="layui-btn layui-btn layui-btn-xs layui-btn-normal"
                            onclick="reply('{$item.id}')">回复</a>{/if}
                        <a class="layui-btn layui-btn layui-btn-xs" onclick="edit('{$item.id}')">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="del('{$item.id}')">删除</a>
                    </td>
                </tr>
                <!-- 输出回复评论 -->
                {if isset($item['replys']) && $item['replys']}
                {foreach $item['replys'] as $vo}
                <tr style="background-color:antiquewhite;">
                    <td><input type="checkbox" value="{$vo['id']}" lay-filter="filter-chk" lay-skin="primary"></td>
                    <td>{$vo['id']}</td>
                    <td>{$vo['name']}</td>
                    <td colspan="2">回复：{$vo['comment']}</td>
                    <td><input type="checkbox" name="status" lay-filter="status" value="{$vo['id']}" lay-skin="switch"
                            lay-text="正常|待审" {if $vo['status']==0} checked{/if}></td>
                    <td>{$vo['add_time']|date='Y-m-d H:i:s'}</td>
                    <td>
                        <a class="layui-btn layui-btn layui-btn-xs" onclick="edit('{$vo.id}')">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="del('{$vo.id}')">删除</a>
                    </td>
                </tr>
                {/foreach}
                {/if}
                {/foreach}
                {else /}
                <tr>
                    <td colspan="8" style="text-align: center;">暂无记录</td>
                </tr>
                {/if}
            </tbody>
        </table>

        <!-- 分页 -->
        <div id="pages"></div>

    </div>

    <!-- js -->
    <script>
        // 获取应用、控制器和方法
        var module = '{:app("http")->getName()}'
            , controller = '{$Request.controller}'
            , action = '{$Request.action}';

        layui.use(['form', 'laypage'], function () {
            var form = layui.form,
                laypage = layui.laypage,
                $ = layui.jquery;

            // 全选全不选
            form.on('checkbox(filter-chkAll)', function (obj) {
                $('input[lay-filter="filter-chk"]').prop('checked', obj.elem.checked);
                form.render('checkbox');
            });
            form.on('checkbox(filter-chk)', function (obj) {
                $('input[lay-filter="filter-chkAll"]').prop('checked', [...$('input[lay-filter="filter-chk"]')].every(item => item.checked));
                form.render('checkbox');
            });

            // 列表开关事件
            form.on('switch(status)', function (obj) {
                $.post('/' + module + '/' + controller + '/modify', { id: obj.value, field: 'status', value: obj.elem.checked ? 0 : 1 }, function (res) {
                    if (res.code) {
                        layer.alert(res.msg, { icon: 2 });
                        setTimeout(() => window.location.reload(), 1000);
                        return;
                    }
                    layer.msg(res.msg);
                }, 'json');
            });

            // 搜索框事件
            form.on('submit(search)', function (obj) {
                var data = obj.field;
                var search_str = '';
                for (var key in data) {
                    if (search_str.length) search_str += '&';
                    search_str += 'search[' + key + ']=' + data[key];
                }
                window.location.href = '?' + search_str;
            })

            // 分页
            laypage.render({
                elem: 'pages',
                count: '{$total}',
                limit: '{$pageSize}',
                curr: '{$page}',
                layout: ['prev', 'page', 'next', 'limit'],
                jump: function (obj, first) {
                    if (!first) {
                        window.location.href = '?page=' + obj.curr + '&limit=' + obj.limit;
                    }
                }
            });

        });

        // 行工具事件

        // 回复
        function reply(id) {
            layer.open({
                title: '添加',
                type: 2,
                maxmin: true,
                area: ['480px', '450px'],
                content: '/' + module + '/' + controller + '/reply?id=' + id
            });
        }

        // 编辑
        function edit(id) {
            layer.open({
                title: '编辑',
                type: 2,
                maxmin: true,
                area: ['480px', '450px'],
                content: '/' + module + '/' + controller + '/edit?id=' + id
            });
        }

        // 删除
        function del(id) {
            var $ = layui.jquery;
            layer.confirm('确定删除吗？', { icon: 3 }, function () {
                $.post('/' + module + '/' + controller + '/del', { id }, function (res) {
                    if (res.code) return layer.alert(res.msg, { icon: 2 });
                    layer.alert(res.msg, { icon: 1 });
                    setTimeout(() => window.location.reload(), 1000);
                }, 'json')
            });
        }

        // 头工具事件

        // 批量删除
        function delAll() {
            var ids = [], $ = layui.jquery;
            $('input[lay-filter="filter-chk"]:checked').each((i, item) => ids.push(item.value));
            // document.querySelectorAll('input[lay-filter="filter-chk"]:checked').forEach(item => ids.push(item.value));
            if (!ids.length) return layer.msg('请选择数据');
            del(ids);
        }

        // 批量待审
        function pending() {
            var ids = [], $ = layui.jquery;
            $('input[lay-filter="filter-chk"]:checked').each((i, item) => ids.push(item.value));
            if (!ids.length) return layer.msg('请选择数据');
            layer.confirm('确定待审核吗？', { icon: 3 }, function (index) {
                $.post('/' + module + '/' + controller + '/pending', { id: ids }, function (res) {
                    if (res.code) return layer.alert(res.msg, { icon: 2 });
                    layer.alert(res.msg, { icon: 1 });
                    setTimeout(() => window.location.reload(), 1000);
                }, 'json');
            });
        }

        // 审核通过
        function passed() {
            var ids = [], $ = layui.jquery;
            $('input[lay-filter="filter-chk"]:checked').each((i, item) => ids.push(item.value));
            if (!ids.length) return layer.msg('请选择数据');
            layer.confirm('确定审核通过吗？', { icon: 3 }, function (index) {
                $.post('/' + module + '/' + controller + '/passed', { id: ids }, function (res) {
                    if (res.code) return layer.alert(res.msg, { icon: 2 });
                    layer.alert(res.msg, { icon: 1 });
                    setTimeout(() => window.location.reload(), 1000);
                }, 'json');
            });
        }

        // 垃圾评论
        function spam() {
            var ids = [], $ = layui.jquery;
            $('input[lay-filter="filter-chk"]:checked').each((i, item) => ids.push(item.value));
            if (!ids.length) return layer.msg('请选择数据');
            layer.confirm('确定垃圾评论吗？', { icon: 3 }, function (index) {
                $.post('/' + module + '/' + controller + '/spam', { id: ids }, function (res) {
                    if (res.code) return layer.alert(res.msg, { icon: 2 });
                    layer.alert(res.msg, { icon: 1 });
                    setTimeout(() => window.location.reload(), 1000);
                }, 'json');
            });
        }

        // 刷新
        function refresh() {
            window.location.reload();
        }

    </script>

</body>

</html>